<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="费用总览" name="first">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <el-select v-model="value" placeholder="请选择">
                          <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :option1="item.value"
                          >
                          </el-option>
                        </el-select>
                        <span class="demonstration">日期</span>
                        <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table1"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <el-table
                      :data="tableData"
                      style="width: 90%;margin-left:100px;margin-top:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="name1" label="日期">
                      </el-table-column>
                      <el-table-column prop="name2" label="电费(元)">
                      </el-table-column>
                      <el-table-column prop="name3" label="水费(元)">
                      </el-table-column>
                    </el-table>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="电费分析" name="second">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <el-select v-model="value" placeholder="请选择">
                          <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :option="item.value"
                          >
                          </el-option>
                        </el-select>
                        <span class="demonstration">日期</span>
                        <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table2"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <el-table
                      :data="tableData"
                      style="width: 90%;margin-left:100px;margin-top:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="name1" label="日期">
                      </el-table-column>
                      <el-table-column prop="name2" label="电费(元)">
                      </el-table-column>
                      <el-table-column prop="name3" label="水费(元)">
                      </el-table-column>
                    </el-table> </el-row
                ></el-tab-pane>
                <el-tab-pane label="水费分析" name="third">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <el-select v-model="value" placeholder="请选择">
                          <el-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :option3="item.value"
                          >
                          </el-option>
                        </el-select>
                        <span class="demonstration">日期</span>
                        <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table3"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <el-table
                      :data="tableData"
                      style="width: 90%;margin-left:100px;margin-top:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="name1" label="日期">
                      </el-table-column>
                      <el-table-column prop="name2" label="当前水费(元)">
                      </el-table-column>
                      <el-table-column prop="name3" label="上月同期水费(元)">
                      </el-table-column>
                      <el-table-column prop="name3" label="同比增长率（%）">
                      </el-table-column>
                    </el-table> </el-row
                ></el-tab-pane>
                <el-tab-pane label="供暖费用分析" name="fourth">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <el-select v-model="value" placeholder="请选择">
                          <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :option4="item.value"
                          >
                          </el-option>
                        </el-select>

                        <span class="demonstration">日期</span>
                        <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table4"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <el-table
                      :data="tableData"
                      style="width: 90%;margin-left:100px;margin-top:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="name1" label="日期">
                      </el-table-column>
                      <el-table-column prop="name2" label="当前供暖费用(元)">
                      </el-table-column>
                      <el-table-column
                        prop="name3"
                        label="上月同期供暖费用(元)"
                      >
                      </el-table-column>
                      <el-table-column prop="name3" label="同比增长（%）">
                      </el-table-column>
                    </el-table> </el-row
                ></el-tab-pane>
              </el-tabs>
            </template>
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      options1: [
        {
          value: '选项1',
          label: '月棒图'
        },
        {
          value: '选项2',
          label: '月棒图'
        },
        {
          value: '选项3',
          label: '月棒图'
        },
        {
          value: '选项4',
          label: '月棒图'
        },
        {
          value: '选项5',
          label: '月棒图'
        }
      ],
      option1: '',

      options2: [
        {
          value: '选项1',
          label: 'mppt1'
        },
        {
          value: '选项2',
          label: 'mppt2'
        },
        {
          value: '选项3',
          label: 'mppt3'
        },
        {
          value: '选项4',
          label: '并网逆变器'
        },
        {
          value: '选项5',
          label: '友好并网计算'
        }
      ],
      option2: '',

      options3: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      option3: '1#逆变器',

      options4: [
        {
          value: '选项1',
          label: '电锅炉计量'
        },
        {
          value: '选项2',
          label: '交流计量-红外补温'
        },
        {
          value: '选项3',
          label: '交流计量空间电场除湿'
        },
        {
          value: '选项4',
          label: '卷窗帘计量'
        },
        {
          value: '选项5',
          label: '水肥一体机'
        },
        {
          value: '选项6',
          label: '直流多路计量LED东'
        },
        {
          value: '选项7',
          label: '直流多路计量LED西'
        },
        {
          value: '选项8',
          label: '直流多路计量物理杀虫'
        }
      ],
      option4: '',

      tableData: [
        {
          name1: '1',
          name2: '46.89',
          name3: '21.98',
          name2: '46.89'
        },
        {
          name1: '2',
          name2: '87',
          name3: '37.8',
          name3: '21.98'
        },
        {
          name1: '3',
          name2: '75',
          name3: '36.4',
          name3: '21.98'
        },
        {
          name1: '4',
          name2: '9.5',
          name3: '66',
          name3: '21.98'
        },
        {
          name1: '5',
          name2: '10.9',
          name3: '113',
          name3: '21.98'
        },
        {
          name1: '6',
          name2: '10.9',
          name3: '113',
          name3: '21.98'
        },
        {
          name1: '7',
          name2: '10.9',
          name3: '113',
          name3: '21.98'
        }
      ],
      tools: Tools,
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      labelPosition: 'left',
      formLabelAlign: {
        name: '0.00w',
        region: '0.00kw',
        type: '0.00s',
        type2: '0.00s'
      },

      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '3',

      activeName: 'first',

      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      scroll: true,
      value: ''
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu,
    Index,
    Bottom
  },
  computed: {
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {
    canvasRegister()
    //控制鼠标右键点击的面板当点击空白处时消失
    if (process.client) {
      document.onclick = event => {
        this.contextmenu = {
          left: null,
          top: null,
          bottom: null
        }
      }
    }
  },

  mounted() {
    let myChart1 = this.$echarts.init(document.getElementById('table1'))
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        textStyle: {
          color: '#ffffff'
        },
        data: ['电费', '水费', '平均费用']
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19',
            '20',
            '21',
            '22',
            '23',
            '24'
          ],
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '元',

          min: 0,
          max: 250,
          interval: 50,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      series: [
        {
          name: '电费',
          type: 'bar',
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3
          ]
        },
        {
          name: '水费',
          type: 'bar',
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3
          ]
        },
        {
          name: '平均费用',
          type: 'line',
          yAxisIndex: 1,
          data: [
            2.0,
            2.2,
            3.3,
            4.5,
            6.3,
            10.2,
            20.3,
            23.4,
            23.0,
            16.5,
            12.0,
            6.2
          ]
        }
      ]
    }
    myChart1.setOption(option)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart1.resize()
    })

    let myChart2 = this.$echarts.init(document.getElementById('table2'))
    let option2 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        textStyle: {
          color: '#ffffff'
        },
        data: ['电费', '水费', '平均费用']
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19',
            '20',
            '21',
            '22',
            '23',
            '24'
          ],
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '元',

          min: 0,
          max: 250,
          interval: 50,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      series: [
        {
          name: '电费',
          type: 'bar',
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3
          ]
        },
        {
          name: '水费',
          type: 'bar',
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3
          ]
        },
        {
          name: '平均费用',
          type: 'line',
          yAxisIndex: 1,
          data: [
            2.0,
            2.2,
            3.3,
            4.5,
            6.3,
            10.2,
            20.3,
            23.4,
            23.0,
            16.5,
            12.0,
            6.2
          ]
        }
      ]
    }
    myChart2.setOption(option2)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart2.resize()
    })

    let myChart3 = this.$echarts.init(document.getElementById('table3'))
    let option3 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        textStyle: {
          color: '#ffffff'
        },
        data: ['电费', '水费', '平均费用']
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19',
            '20',
            '21',
            '22',
            '23',
            '24'
          ],
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '元',

          min: 0,
          max: 250,
          interval: 50,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      series: [
        {
          name: '电费',
          type: 'bar',
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3
          ]
        },
        {
          name: '水费',
          type: 'bar',
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3
          ]
        },
        {
          name: '平均费用',
          type: 'line',
          yAxisIndex: 1,
          data: [
            2.0,
            2.2,
            3.3,
            4.5,
            6.3,
            10.2,
            20.3,
            23.4,
            23.0,
            16.5,
            12.0,
            6.2
          ]
        }
      ]
    }
    myChart3.setOption(option3)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart3.resize()
    })

    let myChart4 = this.$echarts.init(document.getElementById('table4'))
    let option4 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        textStyle: {
          color: '#ffffff'
        },
        data: ['电费', '水费', '平均费用']
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19',
            '20',
            '21',
            '22',
            '23',
            '24'
          ],
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '元',

          min: 0,
          max: 250,
          interval: 50,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      ],
      series: [
        {
          name: '电费',
          type: 'bar',
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3
          ]
        },
        {
          name: '水费',
          type: 'bar',
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3
          ]
        },
        {
          name: '平均费用',
          type: 'line',
          yAxisIndex: 1,
          data: [
            2.0,
            2.2,
            3.3,
            4.5,
            6.3,
            10.2,
            20.3,
            23.4,
            23.0,
            16.5,
            12.0,
            6.2
          ]
        }
      ]
    }
    myChart4.setOption(option4)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart4.resize()
    })
  },

  methods: {
    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#063432;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#063432;color:#FEFEFE;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data &&
                Array.isArray(data.nodes) &&
                Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="less">
.el-tabs {
  color: white;
  background-color: #050e11;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-row1 {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/新UI53.png);
  background-repeat: no-repeat;
}
.el-row2 {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/新UI53.png);
  background-repeat: no-repeat;
}
.el-tabs {
  color: white;
  background-color: #050e11;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
#topology-canvas {
  width: 910px;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
//控制画布的大小
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;
  // background-image: url("+require('../assets/images/timg.jpg')")
}

#table1 {
  width: 100%;
  height: 388px;

  // background-image: url(../../assets/images/新UI45.png);
  // background-size: 100%;
  // background-repeat: no-repeat;
}

#table2 {
  width: 1700px;
  height: 388px;
}

#table3 {
  width: 1700px;
  height: 388px;
}
#table4 {
  width: 1700px;
  height: 388px;
  // margin-top: 40px;
  // margin-left: 60px;
  // padding-left: 0px;
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}
.newstyle {
  // background-image: url(../assets/images/新UI.png);
  // padding-top: 50px;
  // margin-left: 23px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
